{extend name="public:layout" /}
{block name="title"}添加搜索属性{/block}
{block name="head"}
<script src="/public/plugins/template/template.js"></script>
<style>
    .sui-tree-group select{float:left;width:32%;}
</style>
{/block}
{block name="body"}
<div class="wrapper wrapper-content animated fadeInRight">
    <div class="ibox">
        <div class="ibox-title">
            <ol class="breadcrumb">
                <li><i class="fa fa-hand-o-right"></i> <a href="{:url('index')}"> 搜索属性列表</a></li>
                <li class="active">添加搜索属性</li>
            </ol>
        </div>
        <div class="ibox-content">
            <form method="post" class="form-horizontal" id="form">
                <input type="hidden" name="cid_path" id="cidPatch" value="" />
                <div class="form-group">
                    <label class="col-sm-2 control-label Validform_label">绑定分类</label>
                    <div class="col-sm-6">
                        <div data-toggle="tree" data-src="{:url('plus/Category/ajaxGoodsCate')}" data-jsonp="false" class="sui-tree-group"></div>
                        <div class="clearfix"></div>
                        <p class="help-block">
                            选择分类，一般情况绑定为最小分类
                        </p>
                        <script>
                            In('ajaxtree');
                        </script>
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-2 control-label Validform_label">排序</label>
                    <div class="col-sm-2">
                        <input type="text" class="form-control"
                               name="extend_sort" value="0" datatype="n"/>
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-2 control-label Validform_label">搜索属性值</label>
                    <div class="col-sm-10">
                        <table class="table">
                            <thead>
                            <tr>
                                <th width="120">属性值</th>
                                <th>选择项数据【逗号','分割】</th>
                                <th width="120">默认值</th>
                                <th width="120">操作</th>
                            </tr>
                            </thead>
                            <tr>
                                <td><input type="text" id="ipt_item_name" class="form-control" /> </td>
                                <td><input type="text" id="ipt_item_value" class="form-control" /> </td>
                                <td><input type="text" id="ipt_item_default" class="form-control" /> </td>
                                <td><a class="btn btn-primary" href="javascript:;" onclick="addItem(this);">添加属性值</a></td>
                            </tr>
                            <tbody id="itemList"></tbody>
                        </table>
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-sm-10 col-sm-offset-2">
                        <button class="btn btn-primary" type="button" id="btnSub">
                            保存内容
                        </button>
                        <a href="{:url('index')}" class="btn btn-white">取消</a>
                        <span id="validError"></span>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>
{literal}
<script id="itemListTpl" type="text/html">
    {{each list as value i}}
    <tr>
        <td><input type="text" class="form-control itemName" name="extend_value[{{i}}][item_name]" value="{{value.item_name}}" /></td>
        <td><input type="text" class="form-control" name="extend_value[{{i}}][item_value]" value="{{value.item_value}}" /></td>
        <td><input type="text" class="form-control" name="extend_value[{{i}}][item_default]" value="{{value.item_default}}" /></td>
        <td><a href="javascript:;" onclick="del(this)">删除</a></td>
    </tr>
    {{/each}}
</script>
{/literal}
{/block}
{block name="script"}
<script type="text/javascript">
    var data={"list" : []};
    var render = template('itemListTpl');
    $(function () {
        iCheck();
        ajaxSubForm('#btnSub');
    })
    $(function () {
        $('.sui-tree-group').on('click','select',function () {
            var selectValue = $('.sui-tree-group').data('tree').datas;
            if(selectValue!=undefined){
                var arr = selectValue.value;//后台返回数据
                $('#cidPatch').val(arr.join());
            }else{
                $('#cidPatch').val('');
            }
        })
        ajaxSubForm('#btnSub');
    })
    //添加属性值
    function addItem() {
        var item_name = $("#ipt_item_name").val();
        var item_value = $("#ipt_item_value").val();
        var item_default = $("#ipt_item_default").val();
        In('layer',function(){
            if(item_name==''){
                layer.alert('属性值不能为空！');
                return false;
            }
            if(item_value==''){
                layer.alert('选择项数据不能为空！');
                return false;
            }
            var isAdd = true;
            $.each(data.list, function(i, val){
                if(val.item_name == item_name){
                    isAdd = false;
                    return false;
                }
            });
            if(isAdd==false){
                layer.alert('该属性已存在！');
                return false;
            }
            data.list.push({"item_name" : item_name,"item_value" : item_value,"item_default":item_default});
            createHtml(data);
            //重置输入框
            $("#ipt_item_name").val('');
            $("#ipt_item_value").val('');
            $("#ipt_item_default").val('');
        })
    }
    //删除属性
    function del(obj) {
        var itemNameObj = $(obj).closest('tr').find('.itemName');
        var itemName = itemNameObj.val();
        $.each(data.list, function(i, val){
            if(val.item_name == itemName){
                data.list.splice(i,1);
                return false;
            }
        });
        createHtml(data);
    }
    //编译模板
    function createHtml(data) {
        $('#itemList').html(render(data));
    }
</script>
{/block}